import React from 'react';
import {Icon} from 'antd';
class CollapsePn extends React.Component{
    componentWillReceiveProps(nextProps){
        if(typeof(nextProps.showBody)=='boolean'){
            this.setState({
                showBody:nextProps.showBody
            })
        }
    }
    constructor(props){
        super(props);
        this.state = {
            showBody: typeof(props.showBody)=='boolean'?props.showBody:true
        }
    }
    switchPnStatus(){
        if(typeof(this.props.toggle)=='function'){
            this.props.toggle();
        }
        else{
            this.setState({
                showBody:!this.state.showBody
            })
        }
    }
    render(){
        return (
            <div>
                <div style={{position:'relative',cursor:'pointer'}} onClick={()=>{
                    this.switchPnStatus();
                }}>
                    {this.props.title}
                    <div style={{
                        position:'absolute',
                        top:'50%',
                        right:'10px',
                        marginTop:'-9px'
                    }}>
                        {
                            this.state.showBody?
                            <Icon type="down" />:
                            <Icon type="right" />
                        }
                    </div>
                    
                </div>
                {
                    this.state.showBody?
                    <div>
                        {
                            this.props.body
                        }
                    </div>:null
                }
                
            </div>
        )
    }
}

export default CollapsePn;